<template>
	<view>
		<view class="header">
			<view class="city" @click="goto_city"> 
				<text>{{currentCity}}</text>
				<uni-icons type="arrowdown" size="20" color="'#fff'"></uni-icons>
			</view>
			<view class="city_search">
				<input type="text" placeholder="小区/写字楼/学校等" @confirm="handleConfirm"/>
			</view>
		</view>
		<view class="section">
			<view class="loc_title">
				当前地址
			</view>
			<view class="address addr_item" :style="{'color':'#008eff'}">
				{{address}}
			</view>
			<view class="loc_title" v-if="issearch">
				搜索地址
			</view>
			<view class="res_item" v-if="issearch" 
			v-for="item of data" :key="item.id" @click="selectAddr(item)">
				<text class="s_title">{{item.title}}</text>
				<text class="s_address">{{item.address}}</text>
			</view>
			<view class="loc_title">
				收货地址
			</view>
		</view>

	</view>
</template>

<script>
	import uniIcons from "../../components/uni-icons/uni-icons.vue"
	import {mapState,mapMutations} from "vuex"
	import location from '@/api/location.js'
	export default {
		data() {
			return {
				issearch:false,
				data:[]
			};
		},
		components:{
			uniIcons
		},
		methods:{
			...mapMutations(['changeAddress','changeLocation','selectAddress']),
			goto_city(){
				uni.navigateTo({
					url:'../choosecity/choosecity'
				});
				console.log(1);
			},
			async handleConfirm(e){
				let res = await location.suggest(this.currentCity,e.detail.value);
				console.log(res);
				this.data = res.data;
				this.issearch = true;
			},
			selectAddr(item){
				let loc_str = item.location.lat+','+item.location.lng;
				let address = item.address+item.title;
				let obj = {
					address:address,
					location:loc_str
				}
				this.selectAddress(obj);
				uni.navigateBack({
					delta:1
				});
			}
		},
		computed:{
			...mapState(['currentCity','address'])
		},
	}
</script>

<style lang="scss">
	page{
		background: #f5f5f5;
	}
	.header{
		padding: 20rpx 30rpx;
		background: $themeColor;
		@include flexbetween();
		.city{
			@include flexcenter();
			color: #fff;
			height: 60rpx;
			text{
				padding-right: 10rpx;
			}
		}
		.city_search{
			flex-grow: 1;
			background: #fff;
			@include flexcenter();
			border-radius: 10rpx;
		}
	}
	.section>view{
		padding: 10rpx 25rpx;
	}
	.addr_item{
		background: #fff;
	}
	.loc_title{
		color: #666;
	}
	.res_item{
		background: #fff;
		display: flex;
		flex-direction: column;
		border: 1rpx solid #e4e4e4;
		.s_title{
			font-size: 32rpx;
			color: #333;
		},
		.s_address{
			color:#686868;
			font-size:25rpx;
		}
	}
</style>

